<template>
    <div class="indexNav_content flex  aic">
        <div class="cursor_pointer" style="width: 70px;" @click="back()">
            <img  src="/img/back.png" alt="" />
        </div>
        <div style="cursor: pointer;" :class="indexValue == item.id ? 'flex aic indexNav_content_div blue' : 'flex aic indexNav_content_div'"
            v-for="(item, index) in datas" :key="index" @click="classClick(item)">
            <!-- <span v-if="indexValue > 3" class="fontz fonts24">{{ item.number }}</span> -->
            <span class="fontz fonts18 ">{{ item.label }}</span>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'IndexNav',
    props: {
        show_number: {
            type: Number,
            default: 0
        }
    },
    watch: {
        show_number: {
            deep: true,
            immediate: true,
            handler(newObj, oldObj) {
                console.log('obj发生了变化',newObj)
                console.log(newObj);
                if (newObj == 0) {
                } else if (newObj == 1||newObj == 2||newObj == 3) {
                    this.datas = this.data1
                    this.indexValue = newObj
                } else {
                    this.datas = this.data2
                    this.indexValue = 4
                }
            }
        }
    },
    created() {

    },
    data() {
        return {
            datas: [],
            data1: [
                {
                    id: 1,
                    label: '已投递'
                }, {
                    id: 2,
                    label: "邀请投递"
                }, {
                    id: 3,
                    label: "收藏"
                }
            ],
            data2: [
                {
                    id: 4,
                    number: 30,
                    label: '简历初筛',
                    statusGe: 1,
                    statusLe: 2
                }, {
                    id: 5,
                    number: 20,
                    label: "笔试",
                    statusGe: 3,
                    statusLe: 3
                }, {
                    id: 6,
                    number: 20,
                    label: "面试",
                    statusGe: 4,
                    statusLe: 4
                }, {
                    id: 7,
                    number: 20,
                    label: "体检审查/录用",
                    statusGe: 5,
                    statusLe: 7
                }, {
                    id: 8,
                    number: 20,
                    label: "待入职",
                    statusGe: 8,
                    statusLe: 8
                }
            ],
            indexValue: 1
        }
    },
    methods: {
        back(){
            this.$router.push("index2")
            location.reload()
        },
        classClick(item) {
            this.indexValue = item.id
            this.$emit("indexNavClick", item)
        }
    }
}
</script>
  
<style scoped lang="scss">
.indexNav_content {
    height: 70px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;

    img {
        width: 24px;
        height: 24px;
        margin: 0px 23px;
    }

}

.indexNav_content_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 67px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}

.blue {
    background: #2F6CBC;

    span {
        color: #FFFFFF;
    }
}
</style>
  